<template>
  <div class="container">
    <div class="tree-container">
      <el-input 
        placeholder="输入关键字进行过滤" 
        v-model="filterText" 
        clearable 
        size="mini"
        class="custom-input"
      ></el-input>
      <el-tree
        @node-click="handleNodeClick"
        class="filter-tree"
        :data="engData"
        :props="defaultProps"
        default-expand-all
        :filter-node-method="filterNode"
        ref="tree"
      >
      </el-tree>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      filterText: "",
      engData: [
        {
          label: "山西农大主体育场工程",
          children: [
            {
              label: "三号设备",
              tsp: "0",
              pm10: "0",
              pm2_5: "0",
              temperature: "0",
              humidity: "0",
            },
          ],
        },
        {
          label: "太原理工大学一号教学楼工程",
          children: [
            {
              label: "一号设备",
              tsp: "0",
              pm10: "0",
              pm2_5: "0",
              temperature: "0",
              humidity: "0",
            },
            {
              label: "二号设备",
              tsp: "0",
              pm10: "0",
              pm2_5: "0",
              temperature: "0",
              humidity: "0",
            },
          ],
        },
        {
          label: "中北大学",
        },
        {
          label: "兰州理工大学",
          children: [
            {
              label: "四号设备",
              tsp: "0.11",
              pm10: "24",
              pm2_5: "13",
              temperature: "25",
              humidity: "61",
            },
            {
              label: "五号设备",
              tsp: "0.11",
              pm10: "24",
              pm2_5: "13",
              temperature: "25",
              humidity: "61",
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
      activeTab: "tsp", // 默认激活的标签
      selectedNodeData: null,
    };
  },
  watch: {
    // 监听搜索框输入，实时过滤树节点
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  methods: {
    // 树节点过滤方法
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 处理树节点点击事件
    handleNodeClick(data) {
      this.selectedNodeData = data;
    },
  },
};
</script>

<style scoped>
.container {
  display: flex;
  height: 100vh;
}
.tree-container {
  width: 220px;
  border-right: 1px solid #e6e6e6;
  padding: 10px;
}
.chart-container {
  flex: 1;
  padding: 20px;
}
.chart-content {
  margin-top: 20px;
  padding: 15px;
  min-height: 400px;
  background-color: #ffffff;
  border-radius: 4px;
}

/* 搜索框样式 */
.custom-input {
  width: 100%;
  margin-bottom: 10px;
  border: none;
}

/* 标签页核心样式 - 实现点击标签显示下划线 */
.custom-tabs {
  --el-tabs-border-color: transparent;
}

/* 下划线样式 - 只在激活标签下方显示 */
::v-deep .el-tabs__active-bar {
  height: 2px !important;
  background-color: #4fbc8d !important;
  transition: all 0.3s ease; /* 下划线切换动画 */
}

/* 标签项基础样式 */
::v-deep .el-tabs__item {
  border: none !important;
  margin-right: 20px;
  padding: 0 5px;
  height: 36px;
  line-height: 36px;
}

/* 激活标签的文字颜色 */
::v-deep .el-tabs__item.is-active {
  color: #4fbc8d !important;
  font-weight: 500;
}

/* 标签导航容器样式 */
::v-deep .el-tabs__nav-wrap {
  border-bottom: 1px solid #e5e7eb !important;
}

/* 鼠标悬停效果 */
::v-deep .el-tabs__item:hover {
  color: #4fbc8d !important;
}

/* 新增的文字变红且居中样式 */
.red-center-text {
  color: red;
  text-align: center;
}
</style>